<template>
    <div class="footer">
        <div class="icon-container">
            <div class="icon-body" v-for="(item, key) in footerData">
                <div class="footer-icon" :class="`icon-${key + 1}`"></div>
                <div v-html="item.content"></div>
            </div>
        </div>

        <div class="footer-border"></div>

        <div class="focus-logo"><img src="../images/app/WechatIMG320.jpeg"></div>

        <div class="focus-content">
            <div class="middle-inner">
                <div class="weixin-icon"></div>
                <span>扫描二维码关注微信公众号</span>
            </div>
        </div>

        <div class="footer-border"></div>

        <div class="service-consulting"><a href="tel:400-1667-880">服务咨询：400-1667-880</a></div>

        <div class="footer-bottom">Copyright 2014 - 2017  粤ICP备14088498-1号</div>
    </div>
</template>

<script>
    export default {
    	name: 'myFooter',
        data() {
    		return {
			    footerData: [{
				    content: `<p>合法合规</p>`
			    },{
				    content: `<p>服务监管</p>`
			    },{
				    content: `<p>安全可靠</p>`
			    },{
				    content: `<p>专业客服</p>`
			    }]
            }
        }
    }
</script>

<style lang="scss">
    @import "../style/function";
    @import "../style/color";

    .footer {
        background-color: $light-black;
        height: pxToRem(816);
        position: relative;
    }

    .icon-container {
        margin: 0 pxToRem(30);
        padding-top: pxToRem(40);
        display: flex;
        padding-bottom: pxToRem(10);
        position: relative;
    }

    .footer-border {
        position: relative;
        margin: 0 pxToRem(30);

        &:after {
            content: '';
            position: absolute;
            width: 100%;
            height: pxToRem(2);
            background-color: $dark-grey;
            bottom: 0;
        }
    }

    .icon-body {
        width: pxToRem(160);
        height: pxToRem(160);
        flex: 1;
        text-align: center;
        font-size: pxToRem(24);
        color: $light-grey;

        p{
            margin: 0;
        }
    }

    .footer-icon {
        width: pxToRem(60);
        height: pxToRem(60);
        margin: 0 auto pxToRem(20);
        background-size: 100% 100%;
    }

    @for $i from 1 through 4 {
        .icon-#{$i} {
            background-image: url('../images/app/icon/' + $i + '.png');
        }
    }

    .focus-logo {
        width: pxToRem(228);
        height: pxToRem(228);
        margin: pxToRem(60) auto pxToRem(36);

        img {
            width: 100%;
            height: 100%;
        }
    }

    .service-consulting {
        width: pxToRem(400);
        height: pxToRem(72);
        line-height: pxToRem(72);
        text-align: center;
        font-size: pxToRem(24);
        border: $red solid 1px;
        border-radius: pxToRem(36);
        margin: pxToRem(80) auto pxToRem(44);

        a {
            color: $light-red;
        }
    }

    .footer-bottom {
        text-align: center;
        font-size: pxToRem(22);
        color: $grey;
    }

    .focus-content {
        text-align: center;
        color: $white;
        font-size: pxToRem(22);
        margin-bottom: pxToRem(40);
        line-height: pxToRem(30);
        height: pxToRem(30);
        font-style: italic;

        .middle-inner {
            display: inline-block;

            .weixin-icon {
                background-image: url("../images/app/icon/wechat.png");
                width: pxToRem(36);
                height: pxToRem(30);
                background-size: 100% 100%;
                float: left;
                margin-right: pxToRem(18);
            }
        }
    }

</style>





















